import React, { useState } from 'react';
    import { Link, useNavigate } from 'react-router-dom';
    import { useAuth } from '../../hooks/useAuth';
    import routes from '../../router/routeConfig';
    import './index.css';

    const RegisterPage = () => {
      const [name, setName] = useState('');
      const [email, setEmail] = useState('');
      const [password, setPassword] = useState('');
      const [confirmPassword, setConfirmPassword] = useState('');
      const [error, setError] = useState('');
      const [isLoading, setIsLoading] = useState(false);
      
      const { register } = useAuth();
      const navigate = useNavigate();

      const handleSubmit = async (e) => {
        e.preventDefault();
        
        // 表单验证
        if (!name || !email || !password || !confirmPassword) {
          setError('请填写所有必填字段');
          return;
        }
        
        if (password !== confirmPassword) {
          setError('两次输入的密码不一致');
          return;
        }
        
        if (password.length < 6) {
          setError('密码长度至少为6个字符');
          return;
        }
        
        setIsLoading(true);
        setError('');
        
        try {
          const result = await register({
            name,
            email,
            password
          });
          
          if (result.success) {
            // 注册成功，重定向到首页
            navigate(routes.home);
          } else {
            setError(result.error || '注册失败，请重试');
          }
        } catch (err) {
          setError('注册过程中发生错误，请重试');
          console.error('注册错误:', err);
        } finally {
          setIsLoading(false);
        }
      };

      return (
        <div className="container auth-page">
          <div className="auth-card">
            <div className="auth-header">
              <h1><i className="fas fa-user-plus"></i> 注册</h1>
              <p>创建您的知识库系统账户</p>
            </div>
            
            {error && (
              <div className="auth-error">
                <i className="fas fa-exclamation-circle"></i> {error}
              </div>
            )}
            
            <form onSubmit={handleSubmit} className="auth-form">
              <div className="form-group">
                <label htmlFor="name">姓名</label>
                <div className="input-with-icon">
                  <i className="fas fa-user"></i>
                  <input
                    type="text"
                    id="name"
                    value={name}
                    onChange={(e) => setName(e.target.value)}
                    placeholder="请输入您的姓名"
                    required
                  />
                </div>
              </div>
              
              <div className="form-group">
                <label htmlFor="email">电子邮箱</label>
                <div className="input-with-icon">
                  <i className="fas fa-envelope"></i>
                  <input
                    type="email"
                    id="email"
                    value={email}
                    onChange={(e) => setEmail(e.target.value)}
                    placeholder="请输入您的电子邮箱"
                    required
                  />
                </div>
              </div>
              
              <div className="form-group">
                <label htmlFor="password">密码</label>
                <div className="input-with-icon">
                  <i className="fas fa-lock"></i>
                  <input
                    type="password"
                    id="password"
                    value={password}
                    onChange={(e) => setPassword(e.target.value)}
                    placeholder="请输入密码（至少6个字符）"
                    required
                    minLength="6"
                  />
                </div>
              </div>
              
              <div className="form-group">
                <label htmlFor="confirmPassword">确认密码</label>
                <div className="input-with-icon">
                  <i className="fas fa-lock"></i>
                  <input
                    type="password"
                    id="confirmPassword"
                    value={confirmPassword}
                    onChange={(e) => setConfirmPassword(e.target.value)}
                    placeholder="请再次输入密码"
                    required
                  />
                </div>
              </div>
              
              <div className="terms-agreement">
                <input type="checkbox" id="terms" required />
                <label htmlFor="terms">
                  我已阅读并同意 <Link to="#">服务条款</Link> 和 <Link to="#">隐私政策</Link>
                </label>
              </div>
              
              <button 
                type="submit" 
                className="auth-button" 
                disabled={isLoading}
              >
                {isLoading ? (
                  <>
                    <i className="fas fa-spinner fa-spin"></i> 注册中...
                  </>
                ) : (
                  <>
                    <i className="fas fa-user-plus"></i> 创建账户
                  </>
                )}
              </button>
            </form>
            
            <div className="auth-footer">
              <p>
                已有账户？ <Link to={routes.login}>立即登录</Link>
              </p>
              <p>
                <Link to={routes.home} className="back-to-home">
                  <i className="fas fa-arrow-left"></i> 返回首页
                </Link>
              </p>
            </div>
          </div>
        </div>
      );
    };

    export default RegisterPage;
